import React, { useState } from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

export default function Medal() {
    const navigate = useNavigate()
    const [flag, setflag] = useState(false)
    const back = () => {
        navigate('/app/my')
    }

    return (
        <div>
            <NavBar onBack={back}>
                <h3>成就勋章</h3>
            </NavBar>
            <img style={{ width: '100%', height: '910px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%B8%B8%E6%88%8F%E7%BB%93%E6%9E%9C-%E8%8E%B7%E5%BE%97%E5%8B%8B%E7%AB%A0/u2371.svg' />
            <img style={{ position: 'absolute', right: '20px', top: '85px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3685.svg' />
            <img style={{ position: 'absolute', right: '40px', top: '45px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3684.svg' />
            <img style={{ position: 'absolute', right: '5px', top: '45px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3686.svg' />
            <p style={{ fontSize: '19px', position: 'absolute', top: '80px', left: '30px' }}>已点亮2枚勋章</p>
            <span onClick={() => { setflag(false) }} style={{ position: 'absolute', top: '170px', left: '30px', textAlign: 'center', fontSize: '16px', fontWeight: flag ? '' : 'bold' }}>
                本草系列
                <p>2/9</p>
            </span>
            <span onClick={() => { setflag(true) }} style={{ position: 'absolute', top: '170px', left: '130px', textAlign: 'center', fontSize: '16px', fontWeight: flag ? 'bold' : '' }}>
                <p>节日系列</p>
                <p>0/7</p>
            </span>
            <div style={{ width: '400px', height: '700px', backgroundColor: 'white', position: 'absolute', top: '220px', left: '15px', borderRadius: '10px', flexWrap: 'wrap', display: flag ? 'none' : 'flex' }}>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt><img style={{ width: '70px', height: '70px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3594.svg' /></dt>
                    <dd>蒹葭</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt><img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://i.zyccst.com/upload/upay/805607/2/E5BEAEE4BFA1E59BBEE789875F32303232303731353133333635352E6A7067.jpg' /></dt>
                    <dd>黄连</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt><img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3596.svg' /></dt>
                    <dd>藿香</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt><img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3596.svg' /></dt>
                    <dd>灵芝</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt><img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3596.svg' /></dt>
                    <dd>茯苓</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt><img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3596.svg' /></dt>
                    <dd>首乌</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt><img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3596.svg' /></dt>
                    <dd>冬虫夏草</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt><img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3596.svg' /></dt>
                    <dd>雪莲</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt><img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3596.svg' /></dt>
                    <dd>人参</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt><img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3596.svg' /></dt>
                    <dd>陆续更新中</dd>
                </dl>
            </div>
            <div style={{ width: '400px', height: '700px', backgroundColor: 'white', position: 'absolute', top: '220px', left: '15px', borderRadius: '10px', flexWrap: 'wrap', display: flag ? 'flex' : 'none' }}>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt>
                        <img style={{ position: 'absolute', top: '50px', left: '40px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3633.svg' />
                        <img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3615.svg' />
                    </dt>
                    <dd>清明时节</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt>
                        <img style={{ position: 'absolute', top: '50px', left: '170px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3634.svg' />
                        <img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3615.svg' />
                    </dt>
                    <dd>端午龙吟</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt>
                        <img style={{ position: 'absolute', top: '50px', left: '308px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3636.svg' />
                        <img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3615.svg' />
                    </dt>
                    <dd>爱在七夕</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt>
                        <img style={{ position: 'absolute', top: '275px', left: '50px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3639.svg' />
                        <img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3615.svg' />
                    </dt>
                    <dd>团圆中秋</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt>
                        <img style={{ position: 'absolute', top: '275px', left: '178px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3650.svg' />
                        <img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3615.svg' />
                    </dt>
                    <dd>重阳敬老</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt>
                        <img style={{ position: 'absolute', top: '275px', left: '310px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3653.svg' />
                        <img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3615.svg' />
                    </dt>
                    <dd>中元追思</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt>
                        <img style={{ position: 'absolute', top: '515px', left: '47px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3655.svg' />
                        <img style={{ position: 'absolute', top: '530px', left: '53px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3656.svg' />
                        <img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3615.svg' />
                    </dt>
                    <dd>喜迎新春</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt>
                        <img style={{ position: 'absolute', top: '507px', left: '170px', width: '50px', height: '50px', borderRadius: '50%' }} src='https://img0.baidu.com/it/u=451943374,668861145&fm=253&fmt=auto&app=138&f=JPEG?w=613&h=423' />
                        <img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3615.svg' />
                    </dt>
                    <dd>喜乐元宵</dd>
                </dl>
                <dl style={{ textAlign: 'center', margin: '25px' }}>
                    <dt>
                        <img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E6%88%91%E7%9A%84%E5%8B%8B%E7%AB%A0/u3596.svg' />
                    </dt>
                    <dd>陆续更新中</dd>
                </dl>
            </div>
        </div>
    )
}